import React from "react"
import { NavLink, useLocation } from "react-router-dom"
import style from "./style.module.scss"
// 引入图片
import home from "../../assets/images/home.png"
import homeActive from "../../assets/images/home-active.png"
import category from "../../assets/images/category.png"
import categoryActive from "../../assets/images/category-active.png"
import cart from "../../assets/images/cart.png"
import cartActive from "../../assets/images/cart-active.png"
import user from "../../assets/images/user.png"
import userActive from "../../assets/images/user-active.png"

export default function Tabbar() {
  const { pathname } = useLocation()
  return (
    <div className={style.tabbar}>
      <NavLink className={style["tabbar-item"]} to="/home">
        {
          pathname === "/home" ? <img src={homeActive} alt="" /> : <img src={home} alt="" />
        }
      </NavLink>
      <NavLink className={style["tabbar-item"]} to="/category">
        {
          pathname === "/category" ? <img src={categoryActive} alt="" /> : <img src={category} alt="" />
        }
      </NavLink>
      <NavLink className={style["tabbar-item"]} to="/cart">
        {
          pathname === "/cart" ? <img src={cartActive} alt="" /> : <img src={cart} alt="" />
        }
      </NavLink>
      <NavLink className={style["tabbar-item"]} to="/user">
        {
          pathname === "/user" ? <img src={userActive} alt="" /> : <img src={user} alt="" />
        }
      </NavLink>
    </div>
  )
}
